<!-- #layout name=blank -->
<div id="app">
  <div class="page-header">
    <h1 class="title">Database</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a @click="showCreateTableModal=true" class="btn green navbar-btn"
        >Create Table</a
      >
      <a
        v-show="selectedRows.length"
        class="btn red navbar-btn"
        @click="onDelete"
        >Delete</a
      >
    </div>
  </div>
  <kb-table :data="model" show-select :selected.sync="selectedRows">
    <kb-table-column :label="Kooboo.text.common.name">
      <template v-slot="row">
        <a
          class="btn btn-link"
          @click.stop=""
          :href="Kooboo.Route.Get(Kooboo.Route.Database.DataPage, {table: row})"
        >
          {{ row }}
        </a>
      </template>
    </kb-table-column>
    <kb-table-column align="right">
      <template v-slot="row">
        <a
          class="btn btn-ms blue"
          @click.stop=""
          :href="Kooboo.Route.Get(Kooboo.Route.Database.ColumnsPage, {table: row})"
        >
          {{ Kooboo.text.common.setting }}
        </a>
      </template>
    </kb-table-column>
  </kb-table>
  <div
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
    v-kb-modal="showCreateTableModal"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" data-dismiss="modal"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">Create table</h4>
        </div>
        <div class="modal-body" v-if="showCreateTableModal">
          <kb-form
            :model="createTableModel"
            :rules="createTableModelRules"
            ref="createTableForm"
          >
            <kb-form-item prop="name">
              <label class="col-md-3 control-label">Table name</label>
              <div class="col-md-9">
                <input
                  type="text"
                  class="form-control"
                  v-model="createTableModel.name"
                />
              </div>
            </kb-form-item>
          </kb-form>
        </div>
        <div class="modal-footer">
          <button class="btn green" @click="onSaveNewTable">Save</button>
          <button class="btn gray" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  Kooboo.loadJS([
    "/_Admin/Scripts/components/kbBreadcrumb.js",
    "/_Admin/Scripts/components/kbTable.js",
    "/_Admin/Scripts/components/kbForm.js"
  ]);
  new Vue({
    el: "#app",
    data: function() {
      var me = this;
      return {
        breads: [
          {
            name: "SITES"
          },
          {
            name: "DASHBOARD"
          },
          {
            name: Kooboo.text.common.Database
          }
        ],
        showCreateTableModal: false,
        model: [],
        selectedRows: [],
        createTableModel: {
          name: ""
        },
        createTableModelRules: {
          name: [
            { required: Kooboo.text.validation.required },
            {
              min: 1,
              max: 64,
              message: Kooboo.text.validation.maxLength + " 64"
            },
            {
              remote: {
                url: Kooboo.Database.isUniqueTableName(),
                data: function() {
                  return {
                    name: me.createTableModel.name
                  };
                }
              },
              message: Kooboo.text.validation.taken
            }
          ]
        }
      };
    },
    mounted: function() {
      this.loadModel();
    },
    methods: {
      onDelete: function() {
        var me = this;
        if (confirm(Kooboo.text.confirm.deleteItems)) {
          Kooboo.Database.deleteTables({
            names: me.selectedRows
          }).then(function(res) {
            if (res.success) {
              me.loadModel();
              window.info.done(Kooboo.text.info.delete.success);
            }
          });
        }
      },
      onSaveNewTable: function() {
        var me = this;
        if (this.$refs.createTableForm.validate()) {
          Kooboo.Database.createTable(this.createTableModel).then(function(
            res
          ) {
            if (res.success) {
              me.loadModel();
              me.showCreateTableModal = false;
            }
          });
        }
      },
      loadModel: function() {
        var me = this;
        Kooboo.Database.getTables().then(function(res) {
          if (res.success) {
            me.model = res.model;
          }
        });
      }
    },
    watch: {
      showCreateTableModal: function() {
        this.createTableModel.name = "";
      }
    }
  });
</script>
